<template>
  <view class="sort-button-group">
    <!-- 向上 -->
    <text :class="{'disabled-sort':upDisabled}" class="iconfont sort-btn" @click="sortUp">&#xe633;</text>
    <!-- 向下 -->
    <text :class="{'disabled-sort':downDisabled}" class="iconfont sort-btn" @click="sortDown">&#xe642;</text>
  </view>
</template>

<script>
export default {
  props: {
    upDisabled: {
      type: Boolean,
      default: () => false
    },
    downDisabled: {
      type: Boolean,
      default: () => false
    }
  },
  methods: {
    sortUp(e) {
      if(!this.upDisabled) this.$emit('up',e)
    },
    sortDown(e) {
      if(!this.downDisabled) this.$emit('down',e)
    }
  }
};
</script>

<style scoped lang="scss">
@import "@/static/iconfont/iconfont.css";
.sort-button-group {
  .sort-btn {
    color: $uni-color-primary;
    &:first-child {
      margin-right: 20rpx;
    }
    &.disabled-sort {
      color: $uni-text-color-grey;
    }
  }
}
</style>